import React, { Component } from 'react'
import Field from './Field'

export default class App extends Component {
  username = React.createRef()
  password = React.createRef()

  render() {
    return (
      <div>
        <h1>登录系统</h1>
        <Field
          label='用户名'
          type='text'
          ref={this.username}
        />
        <Field
          label='密码'
          type='password'
          ref={this.password}
        />
        <button onClick={() => this.handleLogin()}>登录</button>
        <button onClick={() => this.handleReset()}>重置</button>
      </div>
    )
  }

  handleLogin = () => {
    // 登录逻辑
    console.log('username ref', this.username.current)
    console.log('username ', this.username.current.state.value)
    console.log('password ', this.password.current.state.value)
  }

  handleReset = () => {
    this.username.current.clear()
    this.password.current.clear()
  }
}
